<template>
	<view>
		<view class="submit" id="ele">
			<view class="submit-chat">
				<view class="bt-img" @tap="records">
					<image :src="recordKeyimg" mode=""></image>
				</view>
				<!-- <view class="box"> -->
					<textarea class="chat-send btn" v-model="msg" v-if="!record" @input="inputs" @focus="focus" auto-height="true" />
					<view class="record btn" v-if="record" 
					@touchstart="touchstart()"
					@touchmove="touchmove()"
					@touchend="touchend()"
				>
					<view class="">
						按住说话
					</view>
				</view>
				<!-- </view> -->
				
				<view class="bt-img" @tap="emojis">
					<image class="smile" src="../../static/images/submit/smile.png" mode=""></image>
				</view>
				<view class="bt-img" @tap="moreFun()">
					<image src="../../static/images/submit/add.png" mode=""></image>
				</view>
			</view>
			<view class="emoji" v-if="emoji">
				<view class="emoji-send">
					<view class="emoji-send-delete" @tap='emojiDelete'>
						<image src="../../static/images/submit/delete.png" mode=""></image>
					</view>
					<view class="emoji-send-bt" @tap='emojiSend'>
						发送
					</view>
				</view>
				<emoji @emotion="emotion" :height="230"></emoji>
			</view>
			<view class="more" v-if="more">
				<view class="more-list" @tap="sendpic('album')">
					<image src="../../static/images/submit/pic.png" mode="aspectFit"></image>
					<view class="more-list-title">
						图片
					</view>
				</view>
				<view class="more-list" @tap="sendpic('camera')">
					<image src="../../static/images/submit/camera.png" mode=""></image>
					<view class="more-list-title">
						拍照
					</view>
				</view>
				<view class="more-list" @tap="chooseLocation">
					<image src="../../static/images/submit/location.png" mode=""></image>
					<view class="more-list-title">
						定位
					</view>
				</view>
				<view class="more-list">
					<image src="../../static/images/submit/record.png" mode=""></image>
					<view class="more-list-title">
						视频
					</view>
				</view>
				<view class="more-list">
					<image src="../../static/images/submit/folder.png" mode=""></image>
					<view class="more-list-title">
						文件
					</view>
				</view>
			</view>
		</view>
		<view class="voice-bg" v-if="recording">
			<view class="voice-bg-len">
				<view class="voice-bg-time" :style="{width:voiceTime/0.6+'%'}">
					{{voiceTime}}"
				</view>
			</view>
			<view class="voice-del">
				上滑取消录音
			</view>
		</view>
	</view>
</template>

<script>
	import emoji from './emoji/emoji.vue'
	//录音器
	const recorderManager = uni.getRecorderManager();
	export default {
		data() {
			return {
				timer:null, //定时器
				record:false, //音频键盘拨动开关
				recording:false,
				emoji:false,//表情模块开关
				more:false,//更多模块开关
				msg:'',
				heights:0,//获取模块高度
				recordKeyimg:'../../static/images/submit/audio.png',
				voiceTime:0,//录音时长
				pageY:0,//点击位置
			}
		},
		components:{
			emoji:emoji,
		},
		methods: {
			//点击切换音频
			records: function(){
				if(this.record == true){
					this.record = false;
					this.recordKeyimg = '../../static/images/submit/audio.png';
				}else {
					this.record = true;
					this.recordKeyimg = '../../static/images/submit/keybord.png';
				}
				this.getHeight();
				this.emoji = false;
				this.more = false;
			},
			//表情包模块弹出
			emojis: function(){
				this.emoji = !this.emoji;
				this.more = false;
				this.record = false;
				this.recordKeyimg = '../../static/images/submit/keybord.png';
				this.getHeight();
			},
			//文本触发事件
			inputs: function(e){
				var chatm = e.detail.value;
				var pos = chatm.indexOf('\n');
				if(pos !== -1 && chatm.length>1){
					this.send(this.msg,0);
				};
			},
			// 获取模块高度
			getHeight: function(){
					setTimeout(()=>{
						this.$emit('heights',document.getElementById("ele").getBoundingClientRect().height);	
					},10);
			},
			//获取点击的表情
			emotion: function (e){
				this.msg += e;
			},
			//更多功能弹出
			moreFun:function(){
				this.more = !this.more;
				this.emoji = false;
				this.record = false;
				this.recordKeyimg = '../../static/images/submit/keybord.png';
				this.getHeight();
			},
			//表情发送
			emojiSend: function (){
				if(this.msg.length>0){
					this.send(this.msg,0);
				};
			},
			//表情回退
			emojiDelete: function(){
				if(this.msg.length>0){
					this.msg = this.msg.substring(0,this.msg.length-1);
				}
			},
			//输入框获取焦点
			focus: function(){
				this.emoji = false;
				this.more = false;
				this.heights = this.getHeight();
			},
			//组件之间通信，发送数据
			send: function(msg,type){
				let data = {
					message:msg,
					types:type
				};
				this.$emit('inputs',data);
				setTimeout(()=>{
					this.msg = '';
				},10);
			},
			//发送图片
			sendpic: function(e){
				let count = 9;
				if(e == 'album'){
					count = 9;
				}else{
					count = 1;
				}
				uni.chooseImage({
					count:count,
					sizeType:['original','compressed'],
					sourceType:[e],
					success: (res)=> {
						const filePath = res.tempFilePaths;
						filePath.forEach((item,index)=>{
							this.send(item,1);
						});
					}
				});
			},
			//录音开始
			touchstart: function(e){
				// console.log("action")
				//记录触摸时的y轴位置
				this.pageY = e.changedTouches[0].pageY;
				//蒙版页开关
				this.recording = true;
				let i=0;
				//设置定时器间隔为1s
				this.timer = setInterval(()=>{
					if(i>=60){
						clearInterval(this.timer);
						this.touchend();
					}else{
						this.voiceTime = i;
						i++;
					}
				},1000);
				//录音开始
				recorderManager.start();
			},
			//录音结束
			touchend: function(){
				// console.log("end")
				clearInterval(this.timer);
				recorderManager.stop();
				recorderManager.onStop((res)=>{
					let data={
						voice:res.tempFilePath,
						time:this.voiceTime,
					};
					if(this.recording){
						this.send(data,2);
					}
					//录音时间归位
					this.voiceTime = 0;
					//关闭录音蒙版
					this.recording = false;
				});
			},
			//录音取消
			touchmove: function(e){
				// console.log("move")
				if(this.pageY - e.changedTouches[0].pageY > 100){
					//关闭录音蒙版
					this.recording = false;
				}
			},
			// 获取位置信息
			chooseLocation: function(){
				uni.chooseLocation({
					success: (res) => {
						let data={
							name:res.name,
							address:res.address,
							latitude:res.latitude,
							longitude:res.longitude,
						};
						this.send(data,3);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.submit{
		background-color: rgba(244, 244, 244, 0.96);
		border-top: 1px solid $uni-border-color;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 1000;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.submit-chat{
		width: 100%;
		display: flex;
		align-items: flex-end;
		box-sizing: border-box;
		padding: 14rpx 14rpx;
		image{
			bottom: 0;
			height: 56rpx;
			width: 56rpx;
			margin: 0 10rpx;
			flex: auto;
			
		}
		.smile{
			height: 50rpx;
			width: 50rpx;
			padding-bottom: 3rpx;
			}
		.btn{
			// height: 82rpx;
			flex: auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			max-height: 160rpx;
			margin: 0 20rpx;
		}
		.chat-send{
		}
		.record{
			// width: 100%;
			// height: 82rpx;
			text-align: center;
			font-size: $uni-font-size-lg;
			color: $uni-text-color-grey;
		}
		.record:active{
			background-color: $uni-text-color-grey;
			color: #fff;
		}
	}
	.emoji{
		width: 100%;
		height: 460rpx;
		background-color: rgba(236,237,238,1);
		box-shadow: 0rpx -1rpx 0rpx 0rpx rgba($color: #000000, $alpha: 0.1);
		// padding-bottom: 130rpx;
		.emoji-send{
			width: 260rpx;
			height: 104rpx;
			background-color: rgba(236,237,238,0);
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			right: 0;
			display: flex;
			padding-top: 24rpx;
			.emoji-send-bt{
				flex: 1;
				width: 120rpx;
				margin: 0rpx 32rpx 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: rgba(255,228,49,1);
				font-size: 32rpx;
				text-align: center;
				border-radius: 12rpx;
			}
			.emoji-send-delete{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 120rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: rgba(#fff,1);
				font-size: 32rpx;
				text-align: center;
				border-radius: 12rpx;
				image{
					width: 56rpx;
					height: 56rpx;
				}
			}
		}
	}
	.more{
		width: 100%;
		height: 436rpx;
		background-color: rgba(236,237,238,1);
		box-shadow: 0rpx -1rpx 0rpx 0rpx rgba($color: #000000, $alpha: 0.1);
		bottom: env(safe-area-inset-bottom);
		padding: 8rpx 20rpx;
		box-sizing: border-box;
		.more-list{
			width:25%;
			text-align: center;
			float: left;
			padding-top: 32rpx;
			image{
				width: 72rpx;
				height: 72rpx;
				padding: 24rpx;
				background-color: #fff;
				border-radius: 24rpx;
			}
			.more-list-title{
				font-size: 24rpx;
				color: rgba(39,40,50,0.5);
				height: 34rpx;
				line-height: 34rpx;
			}
		}
	}
	.voice-bg{
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,0.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.voice-bg-len{
			height: 84rpx;
			width: 600rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			background-color: rgba($color: #fff, $alpha: 0.2);
			border-radius: 42rpx;
			text-align: center;
			.voice-bg-time{
				display: inline-block;
				line-height: 84rpx;
				background-color: $uni-color-primary;
				border-radius: 42rpx;
				min-width: 120rpx;
				max-width: 600rpx;
			}
		}
		.voice-del{
			position: absolute;
			bottom: 168rpx;
			margin-bottom: env(safe-area-inset-bottom);
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: $uni-font-size-base;
		}
	}

</style>
